<template>
  <uni-nav-bar :title="title+'工资'" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="animation-slide-right">
    <view class="direction-start" style="background-color: #39A8FF;color:#fff;padding:30rpx;box-sizing: border-box;"
      v-if="infor">
      <view style="margin-top: 5rpx;font-size: 48rpx;">￥{{infor.count}}</view>
      <view style="margin-top: 5rpx;font-size: 26rpx;"><text>基本工资：{{infor.wages}}</text><text
          style="margin-left:15rpx;">奖金：{{infor.jiang}}</text></view>
    </view>
  </view>
  <view class="package_sale space-between" @click="navTo('Sale/attendance/attendanceList?month='+title)">
    <view>考勤记录</view>
    <uni-icons type="forward" size="20"></uni-icons>
  </view>
  <view class="package_sale" style='padding:0px 20rpx;'>
    <view class="space-between list" v-for="(item,index) in detailList" :key="index"
      @click="navTo('Sale/account/detail?name='+item.title+'&money='+item.money+'&title='+title+'&type='+item.type+'&month='+month)">
      <view>{{item.title}}</view>
      <view>{{item.money}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack, navTo } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getWagesInfo, getWagesData } from '@/gql/earthPushing/attendance';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const detailList = ref([]);
  const title = ref()
  const month = ref()
  const infor = ref()
  onLoad((pearm) => {
    title.value = pearm.title
    month.value = pearm.month
    init()
    salaryData()
  })
  function salaryData() {
    showLoading()
    const payload = {
      query: getWagesData,
      variables: {
        staff_id,
        month: month.value
      },
    };
    toPublish(
      'ql/staff/getWagesData',
      payload,
      (obj : any) => {
        const { getWagesData } = obj.data;
        infor.value = getWagesData
      }
    );
  }
  function init() {
    showLoading()
    const payload = {
      query: getWagesInfo,
      variables: {
        staff_id,
        month: month.value
      },
    };
    toPublish(
      'ql/staff/getWagesInfo',
      payload,
      (obj : any) => {
        const { getWagesInfo } = obj.data;
        detailList.value = getWagesInfo
      }
    );
  }
</script>

<style scoped lang="less">
  .list:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .list {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
</style>